<script>

import {setRoutes} from "@/router";
import {getCode, login} from "@/api/user";

export default {
  name: "Login.vue",
  data(){
    return{
     user:{},
     codeUrl:"",
     loading:false,
     rules:{
        userName:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
       code:[
         { required: true, message: '请输入验证码', trigger: 'blur' },
         { min: 4, max: 4, message: '验证码为四位', trigger: 'blur' }
       ]
     }
    }
  },
  created() {
       this.getCode();
  },
  methods:{
    login(){
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          this.loading=true;
        login(this.user).then(res=>{
               if(res.code===200){
                 localStorage.setItem("user",JSON.stringify(res.data));
                 localStorage.setItem("menuList",JSON.stringify(res.data.menuList));
                 setRoutes();
                 this.$notify({
                   title: '登录成功',
                   message: this.getTimeState()+','+JSON.parse(localStorage.getItem("user"))['nickName'],
                   type: 'success'
                 });
                 console.log(res.data.role)
                 if(res.data.role==='ROLE_PATIENT'){
                   this.$router.push("/front/home");
                 }else{
                   this.$router.push("/home");
                 }
                 this.$router.go(1);
               }else{
                 this.loading=false;
                 this.$message.error(res.msg);
               }
         })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
   getTimeState(){
      let currentDate=new Date();
      let currentTime=currentDate.getHours();
      let timeState='';
      if (currentTime >= 0 && currentTime <= 10) {
        timeState = `早上好`;
      } else if (currentTime > 10 && currentTime <= 14) {
        timeState = `中午好`;
      } else if (currentTime > 14 && currentTime <= 18) {
        timeState = `下午好`;
      } else if (currentTime > 18 && currentTime <= 24) {
        timeState = `晚上好`;
      }
      return timeState;
    },
    getCode(){
      getCode().then(res=>{
         if(res.code===200){
           this.codeUrl=res.data.codeUrl;
           this.user.uuid=res.data.uuid;
         }else{
           this.$message.error(res.msg);
         }
      })
    }
  }
}
</script>

<!--<template>-->
<!--  <div class="wrapper">-->
<!--    <h1 style="color:white;font-size:40px">后台管理系统</h1>-->
<!--    <div style="margin:200px auto;background-color: #fff;width:300px;height:350px;padding:20px;border-radius: 10px">-->
<!--      <div style="margin:20px 0;text-align: center;font-size:24px"><b>登 录</b></div>-->
<!--      <el-form status-icon :model="user" :rules="rules" ref="userForm">-->
<!--        <el-form-item prop="userName">-->
<!--          <el-input size="medium" style="margin:10px 0" prefix-icon="el-icon-user" v-model="user.userName"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item prop="password">-->
<!--          <el-input size="medium" style="margin:10px 0" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-input size="medium" style="margin:10px 0;width: 110px" prefix-icon="el-icon-lock" show-password ></el-input><img  src='http://localhost:8088/user/getCaptcha' onclick="this.src='http://localhost:8088/user/getCaptcha'"  style="display:inline-block"/>-->
<!--        </el-form-item>-->
<!--        <div style="margin:10px 0;text-align:center">-->
<!--          <el-button type="primary" size="small" autocomplete="off" style="margin-right:40px" @click="login">登录</el-button>-->
<!--          <el-button type="primary" size="small" autocomplete="off" @click="$router.push('/register')">注册</el-button>-->
<!--        </div>-->

<!--      </el-form>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->
<template>
  <div class="main" style="height: 100vh; display: flex; align-items: center; justify-content: center;">
    <div style="display: flex;  width: 50%; background-color:#F0F0F0;opacity:0.8;border-radius: 5px; overflow: hidden">
      <div style="flex: 1">
        <img src="@/assets/login.png" alt="" style="width: 100%">
      </div>
      <div style="flex: 1; display: flex; align-items: center; justify-content: center">
        <el-form :model="user" style="width: 80%" :rules="rules" ref="userForm">
          <div style="font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 20px">欢迎登录挂号看诊系统</div>
          <el-form-item prop="userName">
            <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入账号" v-model="user.userName"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请输入密码" v-model="user.password"></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <div style="display: flex">
              <el-input placeholder="请输入验证码" prefix-icon="el-icon-circle-check" size="medium"  v-model="user.code"  style="flex: 1" ></el-input>
            <div style="flex:1;height:35px;margin-left: 5px">
            <img  :src="codeUrl" title="看不清，换一张" @click="getCode"/>
              <span style="color: rgb(76, 156, 243); cursor: pointer" @click="getCode">换一张</span>
            </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" :loading="loading" @click.native.prevent="login">
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
          <div style="display: flex">
            <div style="flex: 1">还没有账号？请 <span style="color: #0f9876; cursor: pointer" @click="$router.push('/register')">注册</span></div>
            <div style="flex: 1; text-align: right"><span style="color: #0f9876; cursor: pointer" @click="$router.push('/retrieveAccount')">忘记密码</span></div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style scoped>
.main{
  background: url('../../public/bg4.jpg')
}
</style>
